<template>
  <div>
    <van-cell
      icon="search"
      v-for="(item, index) in highLightSuggestions"
      :key="index"
    >
      <template #title>
        <!-- 利用v-html 识别高亮 -->
        <span v-html="item"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestionAPI } from '@/api'
import { debounce } from 'lodash'
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      suggestions: []
    }
  },
  computed: {
    // new RegExp 动态创建正则 第一个值可为变量
    // map方法 为映射  返回的新数组长度和原数组长度一样
    // 字符串的replace方法给符合条件的值填上标签  由v-html 识别
    highLightSuggestions() {
      const reg = new RegExp(this.keywords, 'ig')
      return this.suggestions.map((str) =>
        str.replace(reg, (match) => `<span style="color:red">${match}</span>`)
      )
    }
  },
  watch: {
    // 先创建的同时传值  watch刚开始会监听不到   需要进入页面立即调用请求
    keywords: {
      immediate: true,
      handler() {
        this.getSearchSuggestion()
      }
    }
  },
  methods: {
    // 获取搜索建议
    // 防抖  考虑到单一职责原则  使用lodash库实现防抖
    // 1.延迟执行
    // 2.干掉上一次的定时器
    getSearchSuggestion: debounce(async function () {
      try {
        const { data } = await getSearchSuggestionAPI(this.keywords)
        // console.log(data)
        // 调用Boolean强转真假值  合并同类项
        // data.data.options.filter(Boolean) === data.data.options.filter(str => Boolean(str))
        this.suggestions = data.data.options.filter(Boolean)
      } catch (error) {
        this.$toast.fail('获取搜索建议失败')
      }
    }, 300)
  }
}
</script>

<style></style>
